前端知识集锦2

前端学习的摘录，持续更新中...

1. 数组去重3种方案

① 使用set去重：set是ES6中提供的数据结构，不同于数组，所有的值都是不重复的，Set内部使用===来判断是否相等，类似'1'和1会两个都保存，NaN和NaN只会保存一个

let unique= [...new Set([1,'1',1,NaN,NaN,undefined,undefined,null,null])];
//[1, "1", NaN, undefined, null]

② 遍历，将值添加到新数组，用indexOf()判断值是否存在，已存在就不添加，达到去重效果。(对NaN去重失败)

 let a = [1,'1',1,NaN,NaN,undefined,undefined,null,null];
 let unique = arr =>{
     let newA = [];
     arr.forEach(key => {
         if(newA.indexOf(key)<0){ //遍历newA是否存在key，如果存在key会大于0就跳过push的那一步
            newA.push(key);
         }
     });
     return newA;
 }
 unique(a); // ["1", 1, NaN, NaN, undefined, null]

③ 遍历，将数组的值添加到一个对象的属性名里，并给属性赋值。对象不能添加相同属性名，以这个为依据可以实现数组去重，然后用Object.keys(对象)返回这个对象可枚举属性组成的数组，这个数组就是去重后的数组。(返回的都是字符串，对于1和'1'都当成'1')

let a = [1,'1',1,NaN,NaN,undefined,undefined,null,null];
let unique = arr => {
    var obj = {};
    arr.forEach(value => {
        obj[value] = 0; // 随便赋值，为了将属性添加进obj对象
    });
    return Object.keys(obj);
}
unique(a); // ["1", "NaN", "undefined", "null"]

2. 深拷贝

深度遍历属性值拷贝

function deepcopy(obj) {
    var copyObj = Object.create(Object.getPrototypeOf(obj));
    Object.getOwnPropertyNames(obj).forEach((keyName) => {
        if ( typeof obj[keyName] == 'object') {
            copyObj[keyName] = deepcopy(obj[keyName])
        } else {
            copyObj[keyName] = obj[keyName]
        } 
    });
    return copyObj;
}

采用JSON.parse(JSON.stringify(obj))，有局限性

function deepcopy(obj){
    return JSON.parse(JSON.stringify(obj));
}

3. 函数length属性

函数length属性的含义: 该函数预期传入的参数个数。指定了默认值以后，length将返回没有指定默认值的参数个数；指定了默认值后，length属性将失真。

(function (a) {}).length // 1
(function (a = 5) {}).length // 0
(function (a, b, c = 5) {}).length // 2

如果设置了默认值的参数不是尾参数，那么length属性也不再计入后面的参数了。

(function (a = 0, b, c) {}).length // 0
(function (a, b = 1, c) {}).length // 1

4.参数作用域

如果参数默认值是一个变量，则该变量所处的作用域，与其他变量的作用域规则是样，即先是当前函数的作用域，然后才是全局作用域。

var x = 1;

function f(x, y = x) {
  console.log(y);
}

f(2) // 2

上面代码中，参数y的默认值等于x。调用时，由于函数作用域内部的变量x已经生成，所以y等于参数x，而不是全局变量x；如果调用时，函数作用域内部的变量x没有生成，结果则不同。

let x = 1;

function f(y = x) {
  let x = 2;
  console.log(y);
}

f() // 1

上面代码中，函数调用时，y的默认值变量x尚未在函数内部生成，所以x指向全局变量。如果此时，全局变量x不存在，就会报错：ReferenceError: x is not defined
一个复杂的例子：

var x = 1;

function foo(x, y = function() { x = 2; }) {
  var x = 3;
  y();
  console.log(x);
}

foo() // 3

上面代码中，函数foo的参数y的默认值是一个匿名函数。函数foo调用时，它的参数x的值为undefined，所以y函数内部的x一开始是undefined，后来被重新赋值2。函数foo内部重新声明了一个x，值为3，这两个x是不一样的，互相不产生影响，因此最后输出3。

如果将var x = 3的var去除，两个x就是一样的，最后输出的就是2。

5. call方法实现继承(apply相同)

call的简单使用：obj1.method.call(obj2,argument1,argument2,...), 用对象obj2替换当前对象obj1，如果obj2为空，则为全局对象。简单使用：

function add(a, b) { return a+b; }

function sub(a, b) { return a-b; }

add.call(sub, 3, 1);  // 4

继承:

function Parent() {
    this.showMsg = function(msg) {
        return msg;
    }
}

function Child() {
    Parent.call(this);    // this.super()意味
}

const chi = new Child();
chi.showMsg('hello world');   // 'hello world'

多重继承:

function Parent1() {
    this.add = function(a, b) {
        return a + b;
    }
}

function Parent2() {
    this.sub = function(a, b) {
        return a - b;
    }
}

function Child() {
    Parent1.call(this);
    Parent2.call(this);
}

6. Javascript 词法作用域

JavaScript是词法作用域不是动态作用域，词法作用域是写代码或说定义时确定的，动态作用域是在运行时确定的，词法作用域关注函数在何处申明，动态作用域关注在何处调用。但是，JS中的this关注的也是函数的调用。

function foo() {
    console.log(a);   // 2
}
function bar () {
    var a = 3;
    foo();
}
var a = 2;
bar()

如果按照动态作用域理论运行结果是：3

7. 扁平化数组

[0, [1, [2, [3, [4]]]]] => [0, 1, 2, 3, 4]

toString()：

const flatten = (arr) => arr.toString().split(',')

reduce():

function flatten(arr){
    return arr.reduce((acc, val) => {
        return acc.concat(Array.isArray(val) ? flatten(val) : val)
    }, []);
};